<template>
  <div id="detail">
    <detall-home class="detall-home" @currentIndex="getIndex" ref="home" />
    <scroller
      class="content"
      ref="scroller"
      :probe-type="3"
      @scroll="getScroll"
    >
      <detail-swiper :detailSwiperImg="DetailSwiperImg" />
      <detail-base-info :goods="good" />
      <detail-shop-infos :shops="shop" />
      <detail-goods-info :detail-info="detailInfo" @imgLoad="imgLoads" />
      <detail-parmas-info ref="detailParmasInfo" :param-info="parmasInfo" />
      <detail-comment-info ref="Comment" :comment-info="commentInfo" />
      <Goodss ref="Recommend" :goods="recommend" />
    </scroller>
    <detail-bottom-bar/>
  </div>
</template>

<script>
import DetallHome from "./chilrenDetall/detallHome.vue";
import DetailSwiper from "./chilrenDetall/detailSwiper.vue";
import DetailBaseInfo from "./chilrenDetall/detailBaseInfo.vue";
import DetailShopInfos from "./chilrenDetall/detailShopInfos.vue";
import DetailGoodsInfo from "./chilrenDetall/detailGoodsInfo.vue";
import DetailParmasInfo from "./chilrenDetall/detailParmasInfo.vue";
import DetailCommentInfo from "./chilrenDetall/detailCommentInfo.vue";

import {
  getDetail,
  Goods,
  Shops,
  GoodsParams,
  getRecommend,
} from "network/detail";

import Scroller from "components/common/scroller/Scroller.vue";
import Goodss from "components/content/goods/goods.vue";

import { itemListenMixin } from "common/mixin";
import DetailBottomBar from './chilrenDetall/detailBottomBar.vue';

export default {
  name: "detail",
  components: {
    DetallHome,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfos,
    Scroller,
    DetailGoodsInfo,
    DetailParmasInfo,
    DetailCommentInfo,
    Goodss,
    DetailBottomBar,
  },
  mixins: [itemListenMixin],
  data() {
    return {
      iid: null, // 地址
      DetailSwiperImg: [],
      good: {},
      shop: {},
      detailInfo: {},
      parmasInfo: {},
      commentInfo: {},
      recommend: [],

      themsTopYs: [], //点击标题跳转相应的y值，储存位置
      currentIndex:0,
    };
  },
  watch: {},
  computed: {},
  methods: {
    /**发送网络请求 */
    /* 拿到全部的数据 */
    async getDetails() {
      try {
        const { result: data } = await getDetail(this.iid);
        /* 获取轮播图 */
        this.DetailSwiperImg = data.itemInfo.topImages;
        /* 获取到商品信息 */
        this.good = new Goods(
          data.itemInfo,
          data.columns,
          data.shopInfo.services
        );
        /* 获取店铺信息 */
        this.shop = new Shops(data.shopInfo);
        /* 获取商品的详情数据 */
        this.detailInfo = data.detailInfo;
        /* 获取参数信息 */
        this.parmasInfo = new GoodsParams(
          data.itemParams.info,
          data.itemParams.rule
        );
        /* 获取评论信息 */
        if (data.rate.cRate !== 0) {
          this.commentInfo = data.rate.list[0] || {};
        }
      } catch (error) {
        console.error("网络请求速度慢");
      }
    },
    /* 拿到推荐数据 */
    async getRecommends() {
      try {
        const { data: res } = await getRecommend();
        this.recommend = res.list;
      } catch (error) {
        console.log(error);
      }
    },
    /**
     * 事件绑定
     */
    // 监控图片加载完一部分后 刷新高度
    imgLoads() {
      this.newRefresh();
      this.$nextTick(() => {
        //获取到各个组件距离顶部的距离
        /* 获取高度 */
        this.themsTopYs.push(0);
        this.themsTopYs.push(this.$refs.detailParmasInfo.$el.offsetTop);
        this.themsTopYs.push(this.$refs.Comment.$el.offsetTop);
        this.themsTopYs.push(this.$refs.Recommend.$el.offsetTop);
      });
    },
    getIndex(index) {
      //点击标签滚动到对应位置
      this.$refs.scroller.scroller.scrollTo(0, -this.themsTopYs[index], 500);
    },
    getScroll(index) {
      /** this.themsTopYs 数组内的值 [0, 8477, 9391, 9606]
       *  滑动的positionY为0-8477 i = 0
       *  滑动的positionY为8477-9391 i = 1
       *  滑动的positionY为9391-9606 i = 2
       *  滑动的positionY为9606---最后 i = 3
       *  判断条件   为了防止越界下标
       *  1、当i不在最后位置时 需要判断滑动的位置在那个集合
       *  2、当i在最后位置时，只需要判断滑动位置是否大于数组内最后的位置
       */
      const positionY = -index.y;
      const length = this.themsTopYs.length;
      for (let i = 0; i < length; i++) {
        if ( this.currentIndex !==i && (i < length - 1 && positionY >= this.themsTopYs[i] &&  positionY <= this.themsTopYs[i + 1]) ||
           (i === length - 1 && positionY >= this.themsTopYs[i]) ) {
          this.currentIndex = i;
          this.$refs.home.currentIndex = this.currentIndex;
        }
      }
    },
  },
  created() {
    //this.iid = this.$route.params.iid; //对应着 path: '/detail/:iid',
    this.iid = this.$route.query.iid; //对应 path: '/detail'
    //console.log(this.$route.params.iid);
    this.getDetails();
    this.getRecommends();
  },
  mounted() {},
  destroyed() {
    this.$bus.$off("itemImgLoad", this.itemListen); //离开不在监听图片
  },
};
</script>
<style lang="less" scoped>
#detail {
  position: relative;
  z-index: 19;
  background-color: #fff;
  height: 100vh;
  .detall-home {
    position: relative;
    z-index: 9;
    background-color: #fff;
  }
  .content {
    height: calc(~"(100% - 44px)"); //less写法
  }
}
</style>